<template>
  <div class="dialogWrapper">
    <el-dialog
      :title="title"
      v-if="visible"
      :visible.sync="visible"
      width="880px"
      top="5vh"
      :before-close="handleClose"
      custom-class="record-dialog"
    >
      <div class="content">
        <div class="form-search">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="人才筛选">
              <el-input
                v-model="form.matchPersonName"
                placeholder="请输入人才ID"
              ></el-input>
            </el-form-item>
            <el-form-item label="时间筛选">
              <el-date-picker
                v-model="form.date"
                :picker-options="pickerOptions"
                :clearable="true"
                type="daterange"
                range-separator="-"
                valueFormat="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="getConsultantChatPersonList"
                type="primary"
                style="width:88px;height:35px;line-height:8px"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="chatRecord">
          <el-tabs
            tab-position="left"
            style="height: 100%;"
            v-model="activeTab"
            @tab-click="getConsultantId"
          >
            <el-tab-pane
              :label="item.personName"
              :name="item.personName"
              v-for="(item, index) in userList"
              :key="index"
            >
              <div class="context">
                <div v-for="(item, index) in records" :key="index">
                  <div class="record-card">
                    <span class="time">{{ item.createTime }}</span>
                    <div class="record">
                      <div
                        class="circle"
                        :style="{
                          background:
                            item.msgFrom === 10 ? '#FF6E40' : '#00C061',
                        }"
                      ></div>
                      <div v-if="item.msgFrom === 10" class="text">
                        顾问<span v-if="item.operationType < 40">对</span
                        ><span v-else>接受</span> 人才“{{
                          tempObject.personName
                        }}({{ item.personId }})”{{ item.operation
                        }}<span style="color:#765AFF;margin-left:5px">{{
                          item.content
                        }}</span>
                      </div>
                      <div v-if="item.msgFrom === 20" class="text">
                        人才“{{ tempObject.personName }}({{ item.personId }})”{{
                          item.operation
                        }}<span style="color:#765AFF;margin-left:5px">{{
                          item.content
                        }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="pager">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="page.currentPage"
                  :page-sizes="[10, 20, 30, 40, 50, 100]"
                  :page-size="page.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  background
                ></el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getConsultantChatPersonList, getRecordList } from "@/api";

export default {
  name: "ConsultantRecord",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    selectedRow: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    selectedRow: {
      handler(val) {
        this.title = val.consultantName + "的咨询记录";
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      activeTab: "",
      title: "",
      total: 0, // 数据条数
      form: {
        matchPersonName: "",
        date: [],
      },
      records: [],
      userList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      page: {
        currentPage: 1,
        pageSizes: 10,
        pageSize: 10,
      },
    };
  },

  created() {
    this.getConsultantChatPersonList();
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(`handleSizeChange当前页: ${val}`);
      this.page.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`handleCurrentChange当前页: ${val}`);
      this.page.currentPage = val;
      this.getRecordList();
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    async getConsultantChatPersonList() {
      const params = {
        consultantId: this.selectedRow.consultantId,
        matchPersonName: this.form.matchPersonName,
        matchStartTime: this.form.date === null ? "" : this.form.date[0],
        matchEndTime: this.form.date === null ? "" : this.form.date[1],
      };
      if (params.matchStartTime) {
        params.matchStartTime = this.form.date[0] + " 00:00:00";
      }
      if (params.matchEndTime) {
        params.matchEndTime = this.form.date[1] + " 23:59:59";
      }
      const res = await getConsultantChatPersonList(params);
      if (res.code === 200) {
        this.userList = res.data;
        if (this.userList.length > 0) {
          this.tempObject = this.userList[0];
          this.activeTab = this.userList[0].personName;
          this.getRecordList();
        }
      }
    },
    getConsultantId(el) {
      this.tempObject = this.userList[el.index];
      this.getRecordList();
    },
    async getRecordList() {
      const params = {
        consultantId: this.tempObject.consultantId,
        personId: this.tempObject.personId,
        pageNo: this.page.currentPage,
        pageSize: 10,
      };
      const res = await getRecordList(params);
      if (res.code === 200) {
        this.records = res.data;
        this.records.forEach((item) => {
          switch (item.operationType) {
            case 10:
              item.operation = "发起了";
              break;
            case 20:
              item.operation = "上传了";
              break;
            case 30:
              item.operation = "完成";
              break;
            case 40:
              item.operation = "接受";
              break;
            default:
              break;
          }
        });
        this.total = res.pageparam.sums;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dialogWrapper {
  height: 82vh;

  .content {
    height: 700px;
    background: url("../../../../assets/images/dialogBg.png") no-repeat;
    background-position: center top;
    background-size: 100% 22%;
    padding: 24px;
    .chatRecord {
      height: 90%;
      display: flex;
      flex-direction: column;
      .context {
        overflow-y: scroll;
        height: 500px;
        margin: 18px;
        .record-card {
          .time {
            width: 167px;
            height: 21px;
            font-size: 15px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #888888;
            line-height: 21px;
            padding-left: 15px;
          }
          .record {
            display: flex;
            align-items: center;
            margin: 10px 0 29px 0;
            .circle {
              width: 9px;
              height: 9px;
              border-radius: 15px;
            }
            .text {
              margin-left: 6px;
              font-size: 15px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #333333;
            }
          }
        }
      }
    }
  }
}
::v-deep .el-dialog__header {
  padding-bottom: 20px;
}
::v-deep .el-dialog__body {
  padding: 0 !important;
}
::v-deep .el-input .el-input__inner {
  height: 36px;
}
::v-deep .record-dialog {
  border-radius: 8px;
}
::v-deep .el-tabs__content {
  height: 100%;
  border: 1px solid #c7d8ee;
  border-radius: 7px;
  overflow-y: scroll;
  // padding: 18px 13px;
  background-color: #ffffff;
  z-index: 999;
}
::v-deep .el-tabs--left .el-tabs__nav-wrap.is-left::after {
  width: 0;
}
::v-deep .el-tabs--left .el-tabs__nav-wrap.is-left {
  margin-right: -18px;
}
::v-deep .is-active {
  background: #7052ff;
  border-radius: 8px;
  color: #ffffff;
}
::v-deep .el-tabs__active-bar is-left {
  height: 41px;
  transform: translateX(-100px);
}
::v-deep .el-tabs__item {
  width: 131px;
}
::v-deep .el-tabs--left .el-tabs__item.is-left {
  text-align: left;
}
::v-deep .el-tabs__nav-wrap {
  padding: 0;
}
::v-deep .el-input__inner {
  background-color: #fafbfe;
}
::v-deep .el-range-input {
  background-color: #fafbfe;
}
</style>
